<script>
import AudioPlayer from 'vue3-audio-player';
import 'vue3-audio-player/dist/style.css';
import { useCounterStore } from '@/stores/counter';
import { RegionSelects } from 'v-region'

export default {
  name: "P3",
  components: {

    AudioPlayer,RegionSelects
  },
  data() {
    return {
      icon: 'layui-icon-home',
      region:{
        province: '350000',
        city: '350100',
        area: '350104',
        town: '350104008'
      },
      optionsLzp: {
        width: "800px", //播放器宽度
        height: "450px", //播放器高度
        color: "#409eff", //主题色
        title: "", //视频名称
        // src: "https://v.cdnlz9.com/20240427/23660_626e65bc/2000k/hls/mixed.m3u8", //视频源
        // type: "m3u8", //视频类型 video/mp4 或m3u8
        src: "https://cn.tusimple.com//wp-content/uploads/2024/04/tsp-full-hero.mp4", //视频源
        type: "video/mp4",
        muted: false, //静音
        webFullScreen: false,
        speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
        autoPlay: false, //自动播放
        loop: false, //循环播放
        mirror: false, //镜像画面
        ligthOff: false, //关灯模式
        volume: 0.3, //默认音量大小
        control: true, //是否显示控制
        controlBtns: [
          "audioTrack",
          "quality",
          "speedRate",
          "volume",
          "setting",
          "pip",
          "pageFullScreen",
          "fullScreen",
        ], //显示所有按钮,
      }
    }
  },
  computed: {
    count() {
      return useCounterStore().count;
    },
  },
  methods: {
    increment() {
      useCounterStore().increment();
    },
    decrement() {
      useCounterStore().decrement();
    },
    change (data) {
      console.log(data)
    }
  },
}
</script>

<template>
  <div style="height: 800px">

    <lay-notice-bar leftIcon="layui-icon-mute"
      text="以一颗冷静思辨的态度去看待这个物质浮躁的新时代，大环境，恰当处理自身与外界环境的矛盾，如何身心健康，自在的成为自己。"></lay-notice-bar>
    <lay-icon-picker v-model="icon"></lay-icon-picker>


    <br>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>

    <br>

    <div>
      <AudioPlayer :option="{
        src: 'http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/audio.mp3',
        title: 'your-audio-title',
        coverImage: 'http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/poster-big.jpeg',
      }" />
    </div>

    <br>


    <div id="mse">

      <longzeVideoPlay v-bind="optionsLzp" poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg" />
    </div>

    <br>

    <RegionSelects
        v-model="region"
        @change="change"
    />

    <lay-empty></lay-empty>

    <lay-backtop :showHeight="200" :bottom="20" position="absolute"></lay-backtop>

  </div>
</template>

<style scoped></style>